wix-style-react/src/ColorPicker/docs/ColorPicker.examples.js

wix-style-react

export const _structure = `
<ColorPicker
  value="#3899EC"
>
  <StorybookComponents.Placeholder>
    Any required content
  </StorybookComponents.Placeholder>
</ColorPicker>;`;

export const _colorConverter = `
<StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <ColorPicker value="#3899EC" />
  </StorybookComponents.Stack>
  <StorybookComponents.Stack height="100%">
    <ColorPicker value="#3899EC" showConverter={false} />
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
`;

export const _colorValueInput = `
<ColorPicker value="#3899EC" showConverter={false} showInput={false} />;`;

export const _historyBar = `
<ColorPicker value="#3899EC" showHistory={true} />;`;

export const _acceptEmptyValue = `
<ColorPicker allowEmpty={true} emptyPlaceholder={'No color picked..'} />;`;

export const _addColorPresets = `
() => {
  const [value, setValue] = React.useState('#3899EC');
  const [presets, setPresets] = React.useState([
    'midnightblue',
    'darkmagenta',
    'lightcoral',
  ]);
  return (
    <ColorPicker
      value={value}
      onAdd={color => setPresets([...presets, color])}
      addTooltipContent="Add color"
    >
      <Swatches colors={presets} onClick={setValue} />
    </ColorPicker>
  );
};`;

export const _listingColorOptions = `() => {
  const [colors, setColors] = React.useState([
    { id: 1, color: 'red' },
    { id: 2, color: 'blue' },
    { id: 3, color: 'green' },
  ]);
  const updateColors = ({ id, color }) =>
    setColors(colors.map(item => (item.id === id ? { ...item, color } : item)));
  const TagThumb = ({ color }) => (
    <Box
      backgroundColor={color}
      marginTop="24%"
      marginLeft="24%"
      borderRadius="50%"
      height="50%"
      width="50%"
    />
  );
  const TagPopover = props => {
    const [color, setColor] = React.useState(props.color);
    const [shown, setShown] = React.useState(false);
    return (
      <Popover
        showArrow
        shown={shown}
        appendTo="window"
        onClick={() => setShown(!shown)}
        onClickOutside={() => setShown(false)}
      >
        <Popover.Element>
          <Text>{color}</Text>
        </Popover.Element>
        <Popover.Content>
          <ColorPicker
            value={color}
            onCancel={() => setShown(!shown)}
            onConfirm={value => {
              setShown(false);
              updateColors({ id: props.id, color: value.hex() });
              setColor(value.hex());
            }}
            onChange={() => {}}
          />
        </Popover.Content>
      </Popover>
    );
  };
  const tags = colors.map(({ color, id }) => ({
    id,
    label: <TagPopover color={color} id={id} />,
    thumb: <TagThumb color={color} />,
  }));
  return (
    <MultiSelect
      tags={tags}
      mode="select"
      placeholder="Select tags from a list"
    />
  );
};`;

export const _colorSwatches = `
() => {
  const [value, setValue] = React.useState('#3899EC');
  const [colors, setColors] = React.useState([
    'midnightblue',
    'darkmagenta',
    'lightcoral',
  ]);

  return (
    <ColorPicker
      value={value}
      onChange={setValue}
      onCancel={setValue}
      onAdd={color => setColors([...colors, color])}
    >
      {({ changeColor }) => (
        <Swatches
          colors={colors}
          onClick={color => {
            changeColor(color);
          }}
        />
      )}
    </ColorPicker>
  );
};`;