odd-box 0.1.10

a dead simple reverse proxy server and web server
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74


interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  withSaveButton?: boolean;
  originalValue?: string | number;
  onSave?: (newValue: string | number | readonly string[] | undefined) => void;
  disableSaveButton?:boolean
}

const Input = ({
  withSaveButton,
  originalValue,
  onSave,
  disableSaveButton,
  ...rest
}: InputProps) => {
  let textInputStyle: React.CSSProperties = {
    width: "100%",
    fontSize: ".8rem",
    minWidth: "250px",
    border: 0,
    outline: 0,
    padding: "0px 10px",
    borderRadius: withSaveButton ? 0 : "4px",
  };

  if (withSaveButton) {
    textInputStyle.borderTopRightRadius = 0;
    textInputStyle.borderBottomRightRadius = 0;
  }

  const showSaveButton = withSaveButton && originalValue !== rest.value;

  const inputSaveButtonClassNames = ["border-0 bg-[#a4dd90] outline-none w-[50px] grid place-content-center transition-all duration-100 p-0 cursor-pointer text-[#00000099] hover:bg-[#86af77]"];

  if (showSaveButton) {
    inputSaveButtonClassNames.push("border-l border-[#00000033]");
  }

  if (disableSaveButton) {
    inputSaveButtonClassNames.push("opacity-[.5] pointer-events-none")
  }

  return (
    <div
      style={{
        display: "grid",
        transition: "all .2s",
        width: "100%",
        gridTemplateColumns: showSaveButton ? "1fr 50px" : "1fr 0px",
        height: "32px",
        borderRadius: withSaveButton ? "3px" : 0,
        overflow: "hidden",
        border: rest.type === "checkbox" ? 0 : "1px solid var(--border)",
      }}
    >
      <input
        {...rest}
        className="text-black"
        style={rest.type !== "checkbox" ? textInputStyle : {}}
      />
      {rest.type !== "checkbox" && withSaveButton && (
        <button disabled={disableSaveButton}
          tabIndex={-1}
          onClick={() => onSave?.(rest.value)}
          className={inputSaveButtonClassNames.join(" ")}
        >
          <span className="text-[12px] font-bold">SAVE</span>
        </button>
      )}
    </div>
  );
};

export default Input;