import * as React from "react"; import * as Strings from "~/common/strings"; import * as Constants from "~/common/constants"; import * as SVG from "~/common/svg"; import * as UserBehaviors from "~/common/user-behaviors"; import { css } from "@emotion/react"; import { LoaderSpinner } from "~/components/system/components/Loaders"; const STYLES_SLATE_NAME = css` overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ${Constants.font.medium}; color: ${Constants.system.black}; `; const STYLES_SLATE_NAME_DARK = css` ${STYLES_SLATE_NAME} color: ${Constants.system.white}; `; const STYLES_NO_VISIBLE_SCROLL = css` overflow-y: scroll; scrollbar-width: none; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; ::-webkit-scrollbar { width: 0px; display: none; } ::-webkit-scrollbar-track { background: ${Constants.system.foreground}; } ::-webkit-scrollbar-thumb { background: ${Constants.system.darkGray}; } `; const STYLES_SLATE_LIST = css` ${STYLES_NO_VISIBLE_SCROLL} max-height: 316px; border-radius: 4px; `; const STYLES_SLATE_LINE = css` display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 16px; background-color: ${Constants.system.white}; border-bottom: 1px solid ${Constants.system.foreground}; cursor: pointer; color: ${Constants.system.darkGray}; height: 48px; :hover { color: ${Constants.system.grayBlack}; } `; const STYLES_SLATE_LINE_DARK = css` ${STYLES_SLATE_LINE} background-color: transparent; border-bottom: 1px solid #3c3c3c; :hover { color: ${Constants.system.brand}; } :last-child { border: none; } `; const STYLES_SLATE_CREATE = css` display: flex; align-items: center; width: 100%; padding: 12px 16px; background-color: ${Constants.system.white}; cursor: pointer; color: ${Constants.system.darkGray}; border-radius: 4px; :hover { color: ${Constants.system.grayBlack}; } `; const STYLES_SLATE_CREATE_DARK = css` ${STYLES_SLATE_CREATE} background-color: transparent; border: 1px solid #3c3c3c; :hover { color: ${Constants.system.brand}; } `; const STYLES_ICON_BOX = css` display: flex; align-items: center; `; export class SlatePicker extends React.Component { render() { const selected = this.props.selected; return (
Create new slate
{this.props.slates.length ? (
{this.props.slates.map((slate) => (
this.props.onAdd(slate)} >
{selected[slate.id] ? ( ) : ( )}
{Strings.getPresentationSlateName(slate)}
{slate.data.public ? (
) : (
)}
))}
) : null}
); } }