博客

颜色选择器

nmp i react-color

import React, {useState} from "react";
import {Button, Modal} from "antd";
import {SketchPicker} from "react-color";
import styled from "styled-components";
const ColorPickerDialogWrapper = styled.div`
  .picker-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
  }
`
const ModalHeader = styled.div`
  text-align: center;
`
const FooterButtonWrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  .ant-btn {
    width: 120px;
  }
  .ant-btn-primary {
    margin-left: 30px;
  }
`

const FooterWrapper = (
onOk: () => void,
onClose: () => void,
confirmLoading: boolean
) => {
  return (
  <FooterButtonWrapper>
    <Button onClick={onClose} style={{ width: 120 }}>
      取消
    </Button>
    <Button
    type="primary"
    style={{ width: 120 }}
    loading={confirmLoading}
    onClick={() => {
      onOk()
    }}
    >
      确认
    </Button>
  </FooterButtonWrapper>
  )
}
export const ColorPickerDialog: React.FunctionComponent<any> = (
{
  color,
  onClose,
  setColor
}
) => {
  const [currentColor, setCurrentColor] = useState<string>(color || '#000')
  const handleConfirm = () => {
    setColor(currentColor)
    onClose()
  }
  return (
  <div>
    <Modal
    title={<ModalHeader>{'颜色选择'}</ModalHeader>}
    footer={null}
    visible={true}
    onCancel={onClose}
    style={{ minWidth: 320 }}
    centered={true}
    >
      <ColorPickerDialogWrapper>
        <section className="picker-wrapper">
          <SketchPicker
          width={'300'}
          color={currentColor}
          onChange={(color: any) => {
            setCurrentColor(color.hex)
          }}
          />
        </section>
        
        {FooterWrapper(
        handleConfirm,
        () => {
          onClose()
        },
        false
        )}
      </ColorPickerDialogWrapper>
    </Modal>
  </div>
  )
}

使用

<ColorPickerDialog
        onClose={() => {
          
        }}
        setColor={(color: string) => {
            //    选择的颜色
         
        }}
        />