textarea 1.0.3 and add textarea site

tdesign/desktop/site/src/components/web/textarea/index.tsx

@@ -0,0 +1,132 @@
+import { WeElement, define, h, createRef } from 'omi'
+import '../common/index'
+import '../../../../../src/textarea/_example/base'
+import '../../../../../src/textarea/_example/limit'
+import '../../../../../src/textarea/_example/event'
+import '../../../../../src/textarea/_example/status'
+
+import '../../../../../src/textarea/style/index'
+
+import * as marked from 'marked'
+
+const docsHTML = marked.parse(`
+
+## API
+### Rate Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+allowInputOverMax | Boolean | false | 超出maxlength或maxcharacter之后是否还允许输入 | N
+autofocus | Boolean | false | 自动聚焦，拉起键盘 | N
+autosize | Boolean / Object | false | 高度自动撑开。 autosize = true 表示组件高度自动撑开，同时，依旧允许手动拖高度。如果设置了 autosize.maxRows 或者 autosize.minRows 则不允许手动调整高度。TS 类型： \`boolean / { minRows?: number; maxRows?: number }\` | N
+disabled | Boolean | false | 是否禁用文本框 | N
+label | String / Slot / Function | - | 左侧文本。TS 类型：\`string / TNode\`。[通用类型定义](https:/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
+maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 | N
+maxlength | Number | - | 用户最多可以输入的字符个数 | N
+name | String | - | 名称，HTML 元素原生属性 | N
+placeholder | String | undefined | 占位符 | N
+readonly | Boolean | false | 只读状态 | N
+status | String | - | 文本框状态。可选项：default/success/warning/error | N
+tips | String / Slot / Function | - | 输入框下方提示文本，会根据不同的 status 呈现不同的样式。TS 类型：\`string / TNode\`。[通用类型定义](https:/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
+value | String / Number | - | 文本框值。TS 类型：\`TextareaValue type TextareaValue = string\`。[详细类型定义](https:/Tencent/omi/blob/master/tdesign/desktop/src/textarea/type.ts) | N
+defaultValue | String / Number | - | 文本框值。非受控属性。TS 类型：\`TextareaValue type TextareaValue = string\`。[详细类型定义](https:/Tencent/omi/blob/master/tdesign/desktop/src/textarea/type.ts) | N
+onBlur | Function | - | TS 类型：\`(value: TextareaValue, context: { e: FocusEvent }) => void\` <br/>失去焦点时触发 | N
+onChange | Function | - | TS 类型：\`(value: TextareaValue, context?: { e?: InputEvent }) => void\` <br/>输入内容变化时触发 | N
+onFocus | Function | - | TS 类型：\`TS 类型：(value: TextareaValue, context : { e: FocusEvent }) => void\` <br/>获得焦点时触发 | N
+onKeydown | Function | - | TS 类型：\`(value: TextareaValue, context: { e: KeyboardEvent }) => void\` <br/>键盘按下时触发 | N
+onKeypress | Function | - | TS 类型：\`(value: TextareaValue, context: { e: KeyboardEvent }) => void\` <br/>按下字符键时触发（keydown -> keypress -> keyup） | N
+onKeyup | Function | - | TS 类型：\`(value: TextareaValue, context: { e: KeyboardEvent }) => void\` <br/>释放键盘时触发 | N
+
+`)
+interface Props {
+ tab: string
+}
+
+define(
+ 'page-textarea',
+ class extends WeElement<Props> {
+ static defaultProps = {
+ tab: 'demo',
+ }
+
+ static css = `code {
+ margin: 0 2px;
+ color: var(--error-8);
+ background: var(--error-1);
+ border-radius: 3px;
+ padding: 2px 6px;
+ font-size: 12px;
+ word-break: break-word;
+ }`
+
+ tab = ['demo', 'api', 'design']
+ tdDocHeader = createRef()
+ tdDocTabs = createRef()
+
+ static propTypes = {
+ tab: String,
+ }
+
+ updateTab = (t: string) => {
+ this.updateProps({
+ tab: t,
+ })
+ }
+
+ isShow(tabStr: string) {
+ return this.props.tab === tabStr ? { display: 'block' } : { display: 'none' }
+ }
+
+ installed() {
+ this.tdDocTabs.current.onchange = ({ detail: currentTab }) => {
+ this.updateTab(currentTab)
+ }
+ }
+
+ render() {
+ return (
+ <>
+ <td-doc-tabs ref={this.tdDocTabs} tab={this.props.tab} style="display:block"></td-doc-tabs>
+ <div style={this.isShow('demo')} name="DEMO">
+ <h3 id='基本多行文本框'>
+ 基本多行文本框 <a class="header-anchor" href="#基本多行文本框"></a></h3>
+ <p>用于多行文本的输入。</p>
+ <demo-wrapper>
+ <textarea-base></textarea-base>
+ </demo-wrapper>
+
+ <h3 id='限制最大字符数'>
+ 限制最大字符数 <a class="header-anchor" href="#限制最大字符数"></a></h3>
+ <p>用于多行文本的输入。</p>
+ <demo-wrapper>
+ <textarea-limit></textarea-limit>
+ </demo-wrapper>
+
+ <h3 id='绑定 DOM 事件'>
+ 绑定 DOM 事件 <a class="header-anchor" href="#绑定 DOM 事件"></a></h3>
+ <p>可绑定 <code>onKeypress</code> <code>onKeydown</code> <code>onKeyup</code> <code>onFocus</code> <code>onBlur</code> 等 DOM 原生事件。</p>
+ <demo-wrapper>
+ <textarea-event></textarea-event>
+ </demo-wrapper>
+
+ <h3 id='不同状态的多行文本框'>
+ 不同状态的多行文本框 <a class="header-anchor" href="#不同状态的多行文本框"></a></h3>
+ <p>支持只读、禁用状态。</p>
+ <demo-wrapper>
+ <textarea-status></textarea-status>
+ </demo-wrapper>
+ </div>
+ <div style={this.isShow('api')} name="API">
+ <div
+ style="margin-bottom:76px"
+ dangerouslySetInnerHTML={{
+ __html: docsHTML,
+ }}
+ ></div>
+ </div>
+ <div style={this.isShow('design')} name="DESIGN"></div>
+ </>
+ )
+ }
+ },
+)

tdesign/desktop/site/src/router.ts

@@ -138,13 +138,6 @@ export function registerRouting(rootEl: any) {
  })
  })
 
- route('/input-adornment', () => {
- import('./components/web/input-adornment/index').then(() => {
- rootEl.data.tagName = 'page-input-adornment'
- rootEl.update()
- })
- })
-
  route('*', function () {
  console.log('not found')
  })

tdesign/desktop/src/textarea/_example/base.tsx

@@ -1,5 +1,4 @@
-import exp from 'constants'
-import { OmiProps, WeElement, h, tag, classNames, createRef, render } from 'omi'
+import { OmiProps, WeElement, h, tag, render } from 'omi'
 
 import "../index"
 
@@ -12,12 +11,12 @@ export default class TextareaBase extends WeElement{
  render(){
 
  return <h.f>
- <t-textarea placeholder="请输入你的文本" autosize={{minRows: 3, maxRows: 5}}></t-textarea>
- <t-textarea placeholder="请输入你的文本" autosize={true}></t-textarea>
- <t-textarea placeholder="请输入描述文案，文本长度最多20，maxlength=20" maxlength="20"></t-textarea>
+ <t-textarea placeholder="请输入描述文案"></t-textarea>
+ <t-textarea placeholder="请输入文案，高度可自适应；autosize=true" autosize={true}></t-textarea>
+ <t-textarea placeholder="请输入文案，高度可自适应，最小3行，最大5行；autosize={minRows: 3, maxRows: 5}" autosize={{minRows: 3, maxRows: 5}}></t-textarea>
+ {/* <t-textarea placeholder="请输入你的文本" autosize={true}></t-textarea>
+ <t-textarea placeholder="请输入描述文案，文本长度最多20，maxlength=20" maxlength="20"></t-textarea> */}
  </h.f>
 
  }
 }
-
-render(<textarea-base></textarea-base>, '.testContainer', {})

tdesign/desktop/src/textarea/_example/event.tsx

@@ -0,0 +1,59 @@
+import Install from '@src/icon/install'
+import { OmiProps, WeElement, h, tag, render} from 'omi'
+
+import '../index'
+
+@tag('textarea-event')
+export default class TextareaEvent extends WeElement {
+ static css = `t-textarea {
+ margin : 10px;
+ }`
+
+ // onKeypress(value:string, e:any) {
+ // console.log('onKeypress: ', value, e);
+ // }
+
+ evtDetail: number
+ value :string
+
+
+ installed(){
+
+ }
+ onBlur = (evt : Event) =>{
+ console.log('onBlur', evt.detail.value, evt.detail.event)
+ }
+
+ onFocus = (evt : Event) =>{
+ console.log('onFocus', evt.detail.value, evt.detail.event)
+ }
+
+ onKeyup = (evt : Event) =>{
+ console.log('onKeyup', evt.detail.value, evt.detail.event)
+ }
+
+ onKeypress = (evt : Event) =>{
+ console.log('onKeypress', evt.detail.value, evt.detail.event)
+ }
+
+ onKeydown = (evt : Event) =>{
+ console.log('onKeydown', evt.detail.value, evt.detail.event)
+ }
+
+
+ render() {
+ return (
+ <h.f>
+ <t-textarea
+ placeholder="请输入"
+ // value={this.value}
+ onMyBlur={this.onBlur}
+ onMyFocus={this.onFocus}
+ onMyKeypress={this.onKeypress}
+ onMyKeydown={this.onKeydown}
+ onMyKeyup={this.onKeyup}
+ ></t-textarea>
+ </h.f>
+ )
+ }
+}

tdesign/desktop/src/textarea/_example/limit.tsx

@@ -0,0 +1,19 @@
+import { OmiProps, WeElement, h, tag, render } from 'omi'
+
+import "../index"
+
+@tag("textarea-limit")
+export default class TextareaLimit extends WeElement{
+ static css = `t-textarea {
+ margin : 10px;
+ }`
+
+ render(){
+
+ return <h.f>
+ <t-textarea placeholder="请输入描述文案，文本长度最多20，maxlength=20" maxlength="20"></t-textarea>
+ <t-textarea placeholder="请输入描述文案，最多20字符（一个汉字占两个字符长度），maxcharacter=20" maxcharacter="20"></t-textarea>
+ </h.f>
+
+ }
+}

tdesign/desktop/src/textarea/_example/status.tsx

@@ -0,0 +1,22 @@
+import { OmiProps, WeElement, h, tag, render } from 'omi'
+
+import "../index"
+
+@tag("textarea-status")
+export default class TextareaStatus extends WeElement{
+ static css = `t-textarea {
+ margin : 10px;
+ }`
+
+ render(){
+
+ return <h.f>
+ <t-textarea placeholder="禁用状态" disabled="true"></t-textarea>
+ <t-textarea placeholder="只读状态" readonly="true"></t-textarea>
+ <t-textarea placeholder="普通状态" readonly="true" tips="这是普通文本提示"></t-textarea>
+ <t-textarea placeholder="成功状态" tips="校验通过文本提示" status="success"></t-textarea>
+ <t-textarea placeholder="警告状态" tips="校验不通过文本提示" status="warning"></t-textarea>
+ <t-textarea placeholder="错误状态" tips="校验存在严重问题文本提示" status="error"></t-textarea>
+ </h.f>
+ }
+}

tdesign/desktop/src/textarea/index.html

@@ -8,7 +8,8 @@
  <title>Textarea</title>
  <style>
  </style>
- <script type="module" src="./_example/base.tsx"></script>
+ <!-- <script type="module" src="./_example/base.tsx"></script> -->
+ <script type="module" src="./_example/event.tsx"></script>
  <script type="module" src="./index.tsx"></script>
 </head>
 

tdesign/desktop/src/textarea/index.tsx

@@ -19,6 +19,7 @@ export default class Textarea extends WeElement<TextareaProps> {
  autosize: false,
  disabled: false,
  readonly: false,
+ value:''
  }
 
  static propTypes = {
@@ -50,10 +51,14 @@ export default class Textarea extends WeElement<TextareaProps> {
  onKeyup: Function,
  }
 
- installed() { 
+
+ value = ""
+
+ installed() {
  let node = this.textArea.current
+ this.value = node.value
+ // console.log(this.props)
  let autosize = this.props.autosize
- console.log(autosize)
  if (autosize === true) {
  node.addEventListener('input', () => {
  let heightObj = calcTextareaHeight(node)
@@ -111,29 +116,35 @@ export default class Textarea extends WeElement<TextareaProps> {
  return text.length + chineseCharacters.length;
  }
 
- onBlur = (e: any) => {
- // console.log(event)
- }
 
- handleTextChange = (evt : any) => {
+ onblur = (event : Event) =>{
+ var textareaValue = event.currentTarget.value;
+ this.fire('my-blur', { event : event, value : textareaValue })
  }
 
- onFocus = (e: any) => {
+ onfocus = (event : Event) =>{
+ var textareaValue = event.currentTarget.value;
+ this.fire('my-focus', { event : event, value : textareaValue })
  }
+ onKeyup = (event : Event) =>{
+ var textareaValue = event.currentTarget.value;
+ this.fire('my-keyup', { event : event, value : textareaValue })
+ } 
 
- onKeypress = (e: any) => {
- // console.log(event);
- }
- onKeydown = (e: any) => {
- // console.log(event);
- }
- onKeyup = (e: any) => {
- // console.log(event);
- }
+ onKeypress = (event : Event) =>{
+ var textareaValue = event.currentTarget.value;
+  this.fire('my-keypress', { event : event, value : textareaValue })
+ } 
+
+ onKeydown = (event : Event) =>{
+  var textareaValue = event.currentTarget.value;
+ this.fire('my-keydown', { event : event, value : textareaValue })
+ } 
 
  render(props: OmiProps<TextareaProps, any>, store: any) {
  const { autofocus, autosize, placeholder, readonly, value, status, 
- disabled, tips ,maxlength, maxcharacter} = props
+ disabled, tips ,maxlength, maxcharacter, onBlur, onChange, onKeydown,
+ onKeypress, onKeyup, onFocus} = props
 
  return (
  <>
@@ -151,9 +162,12 @@ export default class Textarea extends WeElement<TextareaProps> {
  autofocus={autofocus}
  maxlength={maxlength}
  maxcharacter={maxcharacter}
- onChange={this.handleTextChange}
- onFocus={this.onFocus}
- onKeypress={this.onKeypress}
+ onBlur={(e) => {this.onblur(e)}}
+ onChange={onChange}
+ onFocus={(e) => {this.onfocus(e)}}
+ onKeyPress={(e) => {this.onKeypress(e)}}
+ onKeyDown={(e) =>{this.onKeydown(e)}}
+ onKeyUp={(e) =>{this.onKeyup(e)}}
  ref={this.textArea}
  ></textarea>
  {tips && <div class={classNames(TextareaClassNamePrefix('tips'), this.getTipsStyle(status))}>{tips}</div>}