wix-style-react/src/FillButton/docs/FillButton.demo.js

wix-style-react

import React from 'react';
import FillButton from '..';
import { Layout } from '../..';
import Box from '../../Box';
import ColorPicker from '../../ColorPicker';
import FillPreview from '../../FillPreview';
import FormField from '../../FormField';
import Popover from '../../Popover/Popover';

export default () => {
  const [selectedIndex, setSelectedIndex] = React.useState(0);
  const [shown, setShown] = React.useState(false);
  const [colors, setColors] = React.useState([
    '#ffbc42',
    '#d81159',
    '#8f2d56',
    '#218380',
  ]);

  return (
    <FormField label="T-shirt color:">
      <Box height="24px">
        <Layout cols={7} gap="12px">
          <Popover shown={shown} showArrow>
            <Popover.Element>
              <FillButton
                tooltipContent="Order custom color"
                onClick={() => setShown(!shown)}
              />
            </Popover.Element>
            <Popover.Content>
              <ColorPicker
                showConverter={false}
                onChange={() => {}}
                onConfirm={color => {
                  setShown(false);
                  setColors([...colors, color.hex()]);
                }}
                onCancel={() => setShown(false)}
              />
            </Popover.Content>
          </Popover>
          {colors.map((color, index) => (
            <FillPreview
              fill={color}
              selected={selectedIndex === index}
              onClick={() => setSelectedIndex(index)}
            />
          ))}
        </Layout>
      </Box>
    </FormField>
  );
};