Picker

Cập nhật lần cuối: 27/05/2022

Cho phép tạo giao diện cho phép người dùng chọn một lựa chọn trên từng cột dữ liệu

Properties

Picker

Name	Type	Default	Description
value	{ [columnName: string]: string | number }		Giá trị của Picker
defaultValue	{ [columnName: string]: string | number }		Giá trị mặc định của Picker
title	string		Đặt title cho picker modal
data	PickerDataType[]		Data cho Picker ứng với từng column
defaultOpen	boolean		Mặc định mở picker modal hay không
disabled	boolean		Vô hiệu hoá Picker input
onChange	(value: {[name: string]: PickerColumnOption}) => void		Thêm event handler khi thay đổi lựa chọn
onVisibilityChange	(visibilityState: boolean) => void		Thêm event handler khi picker modal thay đổi trạng thái mở/đóng
formatPickedValueDisplay	(value: {[name: string]: PickerColumnOption}) => string		Format value lựa chọn hiển thị trên Input
mask	boolean		Bật/tắt lớp overlay khi mở picker modal
maskCloseable	boolean		Click ra ngoài lớp overlay để đóng
action	PickerActionType		Thêm action button cho picker modal
prefix	ReactNode		Prefix icon cho Input
suffix	ReactNode		Suffix icon cho Input
inputClass	string		thêm class cho Input
label	string		Thêm Label hiển thị phía trên Input
helperText	string		Helper text hiển thị phía dưới của field input.
errorText	string		Text hiển thị khi status của field input là error
status	InputStatus		Trạng thái của field input. Nhận các giá trị: success | error
name	string		Thêm name cho input field
placeholder	string		Thêm placeholder cho input trong trường hợp không có option nào đã được chọn

Type

PickerDataType

Name	Type	Default	Description
name	string		Tên column
onChange	(value: PickerColumnOption, name: string) => void		Thêm event handler khi thay đổi lựa chọn trên column
options	PickerColumnOption[]		các options của column

PickerColumnOption

Name	Type	Default	Description
key	string		unique key
value	string|number		giá trị của option
displayName	string		Phần nội dung hiển thị cho option

PickerActionType

Name	Type	Default	Description
text	string		Action button text
onClick			Thêm event handler cho sự kiện click button
close	boolean		Click vào button để đóng picker modal

Example

Open Sandbox

import React from "react";
import { Box, Text, Picker, Page } from "zmp-ui";

function PagePicker() {
  const genTestData = (name, number, prefix = "Option") => {
    const data = [];
    // eslint-disable-next-line no-plusplus
    for (let i = 0; i < number; i++) {
      data.push({
        value: i + 1,
        displayName: `${prefix} ${i + 1}`
      });
    }
    return data;
  };
  return (
    <Page className='page'>
      <div className='section-container'>
        <Text.Title size='small'>Type</Text.Title>
        <Box mt={6}>
          <Picker
            label='Single Column'
            helperText='Helper text'
            placeholder='Placeholder'
            mask
            maskClosable
            title='Single Column'
            action={{
              text: "Close",
              close: true
            }}
            // disabled
            data={[
              {
                options: genTestData("key1", 100, "Option"),
                name: "option"
              }
            ]}
          />
        </Box>
        <Box mt={6}>
          <Picker
            label='Multiple Columns'
            helperText='Helper text'
            placeholder='Placeholder'
            mask
            maskClosable
            title='Multiple Columns'
            action={{
              text: "Close",
              close: true
            }}
            // disabled
            data={[
              {
                options: genTestData("key1", 5, "Col 1 - "),
                name: "otp1"
              },
              {
                options: genTestData("key2", 10, "Col 2 - "),
                name: "otp2"
              },
              {
                options: genTestData("key3", 15, "Col 3 - "),
                name: "otp3"
              }
            ]}
          />
        </Box>
      </div>
    </Page>
  );
}

export default PagePicker;