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
action	PickerActionType		Các thiết lập cho nút xác nhận, hiển thị ở bên dưới hộp thoại của picker.
data	PickerDataType[]		Mảng chứa các thiết lập cho các cột cần hiển thị trong picker panel. Mỗi phần tử trong mảng tương ứng với một cột trong picker panel, theo thứ tự từ trái sang phải.
defaultOpen	boolean	false	Mặc định hiển thị hộp thoại picker khi render.
defaultValue	{ { [name: string]: OptionValueType } }		Giá trị mặc định của picker. Thay đổi giá trị của defaultValue sau khi picker đã được render sẽ không có tác dụng. Được truyền vào dưới dạng object chứa value của các lựa chọn cần được chọn sẵn, với key là tên của cột tương ứng.
disabled	boolean	false	Vô hiệu hóa picker cũng như input được dùng để kích hoạt picker.
errorText	string		Error text là phần văn bản ngắn nằm dưới các ô nhập liệu. Nội dung của các văn bản này thường chứa thông tin cảnh báo về lỗi của dữ liệu được nhập vào, cũng như hướng dẫn cách khắc phục. errorText sẽ được hiển thị thay cho helperText khi status có giá trị là error.
formatPickedValueDisplay	(value: { { [name: string]: PickerColumnOption } }) => string		Hàm dùng để format giá trị hiển thị của picker. Nhận vào một object chứa các thiết lập được chọn của các cột, và cần trả về một chuỗi để hiển thị trên input của picker.
helperText	string		Helper text là phần văn bản ngắn nằm dưới các ô nhập liệu. Nội dung của các văn bản này thường chứa thông tin hướng dẫn giúp người dùng hiểu rõ hơn về tác dụng hoặc mô tả định dạng của dữ liệu được khuyến khích nhập vào.
inputClass	string		CSS class của input dùng để kích hoạt picker
label	string		Nhãn của input được dùng làm phần tử kích hoạt hộp thoại picker. Được hiển thị phía trên input.
mask	boolean	false	Mask là một lớp overlay màu xám được phủ lên các thành phần bên dưới hộp thoại của picker, ngăn không cho người dùng tương tác với các nội dung đó và tập trung vào hộp thoại được mở.
maskClosable	boolean	false	Cho phép đóng hộp thoại của picker khi click vào mask.
name	string		Tên định danh của picker, dùng với form để phân biệt các input với nhau.
placeholder	string		Placeholder của input của picker. Được hiển thị khi chưa có giá trị.
prefix	ReactNode		Phần tử nằm bên trái input của picker.
status	InputStatus		Trạng thái hiện tại của input date picker. Nếu là error, input sẽ có màu cảnh báo kèm theo errorText, ngược lại input sẽ có màu trung hoà kèm theo helperText.
suffix	ReactNode		Phần tử nằm bên phải input của picker.
title	string		Tiêu đề được hiển thị ở đầu hộp thoại của picker.
value	{ { [name: string]: OptionValueType } }		Giá trị hiện tại của picker. Cần được sử dụng cùng với onChange để cập nhật lại giá trị lựa chọn. Được truyền vào dưới dạng object chứa value của các lựa chọn người dùng đã chọn, với key là tên của cột tương ứng.
onChange	(value: { { [name: string]: PickerColumnOption } }) => void		Callback được gọi khi giá trị của các cột thay đổi. Cần phải cập nhật lại giá trị value nếu được truyền vào để đảm bảo lựa chọn được hiển thị đúng.
onVisibilityChange	(visibilityState: boolean) => void		Callback được gọi khi trạng thái hiển thị của hộp thoại picker thay đổi

Type

PickerDataType

Name	Type	Default	Description
name	string		Tên định danh của cột, dùng để phân biệt các cột với nhau.
options	PickerColumnOption[]		Mảng các lựa chọn bên trong cột.
onChange	(value: PickerColumnOption, name: string) => void		Callback được gọi khi lựa chọn được thay đổi. Cần phải cập nhật lại giá trị value nếu được truyền vào để đảm bảo lựa chọn được hiển thị đúng.

PickerColumnOption

Name	Type	Default	Description
displayName	string		Tên hiển thị của option đối với người dùng
key	string		Key phân biệt giữa các option
selected	boolean	false	Trạng thái được chọn ban đầu
value	OptionValueType		Giá trị của option, dùng để xác định option được chọn

PickerActionType

Name	Type	Default	Description
close	boolean	false	Action này chỉ định việc đóng picker khi được click
text	string		Chữ trên nút
onClick	(event: React.MouseEvent) => void		Callback được gọi khi action được click

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;