react-color#HuePicker TypeScript Examples

The following examples show how to use react-color#HuePicker. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: PaintControls.tsx    From disco-cube-admin with MIT License 5 votes vote down vote up 
PaintControls: React.FC<Props> = ({ settings, onSettingsChange }) => {
  const [pickerVisible, setPickerVisible] = React.useState(false);

  const sizeRatio = settings.bushSize / 10;
  return (
    <Horizontal verticalAlign="center" spacing={20}>
      <Slider
        style={{ width: "100%" }}
        value={settings.bushSize}
        min={1}
        max={10}
        onChange={(v: any) => onSettingsChange({ ...settings, bushSize: Array.isArray(v) ? 0 : v })}
      />
      <Vertical
        style={{
          width: 40,
          height: 40,
          position: "relative",
        }}
        horizontalAlign="center"
        verticalAlign="center"
        onClick={() => setPickerVisible(true)}
      >
        <div
          style={{
            width: 40 * sizeRatio,
            height: 40 * sizeRatio,
            borderRadius: "0.5em",

            backgroundColor: `rgb(${settings.brushColor.r}, ${settings.brushColor.g}, ${settings.brushColor.b})`,
          }}
        ></div>
        {pickerVisible && (
          <Vertical
            style={{
              position: "absolute",
              top: -0,
              right: -0,
              zIndex: 10000,
              padding: 20,
              background: "white",
              borderRadius: 6,
            }}
          >
            <div
              style={{
                position: "fixed",
                top: "0px",
                right: "0px",
                bottom: "0px",
                left: "0px",
              }}
              onClick={e => {
                setPickerVisible(false);
                e.stopPropagation();
                e.preventDefault();
                return false;
              }}
            ></div>

            <HuePicker
              color={settings.brushColor}
              onChange={color => onSettingsChange({ ...settings, brushColor: color.rgb })}
            />
          </Vertical>
        )}
      </Vertical>
    </Horizontal>
  );
}
Example #2
Source File: SettingsSidebar.tsx    From opensaas with MIT License 4 votes vote down vote up 
SettingsSidebar = (props: SettingsSidebarProps) => {
  const { open, toggle, palletType, settings, handleChangeNavbar, handleThemeChange } = props;
  const [styles, setStyles] = React.useState({
    background: '#fff',
    txt: '#000',
    search: '#fff',
    textSidebar: '#000',
    backgroundSidebar: '#fff',
    activeTab: '#2196f3',
    openSidebar: false,
    openNavbar: false,
  });
  const { background, openNavbar, txt, search, activeTab, openSidebar, backgroundSidebar, textSidebar } = styles;
  const classes = useStyles();

  return (
    <Drawer anchor={'right'} open={open} onClose={() => toggle(false)}>
      <div className={classes.header}>SETTINGS</div>
      <List className={classes.list}>
        {[
          { text: 'Dark background', id: 'dark' },
          { text: 'Light background', id: 'light' },
          { text: 'Dark navbar', id: 'navbar' },
          { text: 'Dark sidebar', id: 'sidebar' },
        ].map(({ id, text }: any) => (
          <ListItem button disabled={palletType === id} key={text} onClick={() => handleThemeChange(id)}>
            <ListItemText primary={text} />
          </ListItem>
        ))}
        {settings.map(({ state: itemState, label }: any) => {
          const [state, setState] = itemState;
          return (
            <ListItem key={label}>
              <ListItemText primary={label} />
              <Switch
                checked={state}
                onChange={() => setState(!state)}
                color='primary'
                name='checkedB'
                inputProps={{ 'aria-label': 'primary checkbox' }}
              />
            </ListItem>
          );
        })}
        <ListItem
          button
          onClick={() => setStyles((prevState: any) => ({ ...prevState, openNavbar: !prevState.openNavbar }))}>
          <ListItemText primary='Custom Navbar' />
          {openNavbar ? <ExpandLess /> : <ExpandMore />}
        </ListItem>
        <Collapse in={openNavbar} timeout='auto' unmountOnExit>
          <ListItem>Background navigation</ListItem>
          <ListItem>
            <HuePicker
              color={background}
              onChangeComplete={({ hex }) => {
                handleChangeNavbar(hex, '--custom-nav-bg', 'customNavbar');
                setStyles((prevState: any) => ({ ...prevState, background: hex }));
              }}
            />
          </ListItem>
          <ListItem>Text navigation</ListItem>
          <ListItem>
            <HuePicker
              color={txt}
              onChangeComplete={({ hex }) => {
                handleChangeNavbar(hex, '--custom-nav-txt', 'customNavbar');
                setStyles((prevState: any) => ({ ...prevState, txt: hex }));
              }}
            />
          </ListItem>
          <ListItem>Search navigation panel</ListItem>
          <ListItem>
            <HuePicker
              color={search}
              onChangeComplete={({ hex }) => {
                handleChangeNavbar(hex, '--custom-nav-search', 'customNavbar');
                setStyles((prevState: any) => ({ ...prevState, search: hex }));
              }}
            />
          </ListItem>
        </Collapse>

        <ListItem
          button
          onClick={() => setStyles((prevState: any) => ({ ...prevState, openSidebar: !prevState.openSidebar }))}>
          <ListItemText primary='Custom Sidebar' />
          {openSidebar ? <ExpandLess /> : <ExpandMore />}
        </ListItem>

        <Collapse in={openSidebar} timeout='auto' unmountOnExit>
          <ListItem>Text sidebar</ListItem>
          <ListItem>
            <HuePicker
              color={textSidebar}
              onChangeComplete={({ hex }) => {
                handleChangeNavbar(hex, '--custom-sidebar-txt', 'customSidebar');
                setStyles((prevState: any) => ({ ...prevState, textSidebar: hex }));
              }}
            />
          </ListItem>
          <ListItem>Background sidebar</ListItem>
          <ListItem>
            <HuePicker
              color={backgroundSidebar}
              onChangeComplete={({ hex }) => {
                handleChangeNavbar(hex, '--custom-sidebar-bg', 'customSidebar');
                setStyles((prevState: any) => ({ ...prevState, backgroundSidebar: hex }));
              }}
            />
          </ListItem>
          <ListItem>Active tab sidebar</ListItem>
          <ListItem>
            <HuePicker
              color={activeTab}
              onChangeComplete={({ hex }) => {
                handleChangeNavbar(hex, '--custom-sidebar-active-tab', 'customSidebar');
                setStyles((prevState: any) => ({ ...prevState, activeTab: hex }));
              }}
            />
          </ListItem>
        </Collapse>
      </List>
    </Drawer>
  );
}