We Keep Coding

React google chart timeline handle event not working on first load

I have react google chart timeline with chartEvents.
I want when clicked on define chart, display modal window.
On first page load it doesnt work (and when I reload page).
But if I going to another tab in my app,then return to my timeline and click on chart its work without problems.
Please give me advice, whats a problem?
P.S.
I have some thoughts about this:
Problems with load of timeline(in first load page doesnt load all data in google-chart)
Problems with useState(Many counts of useState in my component)
My code example:
Modal.setAppElement('#modal')
interface IItem {
name: string,
duration: string,
id: string,
startDate: Date,
endDate: Date
}
export const options = {
timeline: {
groupByRowLabel: true,
colorByRowLabel: true,
showBarLabels: false,
barLabelStyle: { fontSize: 18 },
},
tooltip: {
isHtml: true
}
}
export function NewGantt() {
const [modalIsOpen, setIsOpen] = useState(false)
const [selectedVacation, setselectedVacation] = useState({ fullname: '', duration: '', startDate: new Date(), endDate: new Date(), vacationId: '' })
const [rows, setrows] = useState([['', '', '', new Date(), new Date(), null, 0, null]])
const [projects, setprojects] = useState<IProject[]>([])
const [selected, setSelected] = useState(selectedOptions[0])
const [dataArray, setDataArray] = useState([
[
{ type: 'string', id: 'Name' },
{ type: 'string', id: 'Duration' },
{ type: 'string', role: 'tooltip', div: { html: true } },
{ type: 'string', id: 'style', role: 'style' },
{ type: 'date', id: 'Start' },
{ type: 'date', id: 'End' },
],
[
'User', '01.01.2022-02.01.2022', `
<div style='padding: 10px'>
<b>User:</b> user <br><hr>
<div style='margin-top: 10px'><b>Vacation dates:</b> 01.01.2022-02.01.2022</div>
</div>
`, 'black', new Date('Sun Mar 12 2023 00:00:00 GMT+0700'), new Date('Sun Mar 13 2023 00:00:00 GMT+0700')
]
]) as any
const { isLoading: isLoadingProjects, refetch: refetch } = useQuery(
['projects'],
async () => {
const res = await axios.get(`${SERVER_URI}/rest/workspace/pm/projects`, {
headers: {
Authorization: `${localStorage.getItem('JWT_Token')}`,
},
})
if (res.data) {
setprojects(res.data.map((el: IProject) => ({ ...el, isActive: false })))
}
},
{
refetchOnWindowFocus: false,
},
)
function projectsButton(project: IProject) {
const projectIndex = projects.findIndex(
(pr) => pr.projectId === project.projectId,
)
const arr = [...projects]
arr[projectIndex].isActive = !arr[projectIndex].isActive
setprojects(arr)
}
useEffect(() => {
const activeProjectIds = [...projects]
.filter((pr) => pr.isActive)
.map((pr) => pr.projectId)
.join(',')
if (activeProjectIds.length > 0) {
requestOfStatus(selected.statusType, activeProjectIds)
} else {
requestOfStatus(selected.statusType, '')
}
}, [projects])
const arr: any[][] = []
useEffect(() => {
const arrayObjects: any[] = [
{ type: 'string', id: 'Name' },
{ type: 'string', id: 'Duration' },
{ type: 'string', role: 'tooltip', div: { html: true } },
{ type: 'string', id: 'style', role: 'style' },
{ type: 'date', id: 'Start' },
{ type: 'date', id: 'End' },
]
rows.forEach((vacation: any) => {
const name = vacation[1]
const startDate = new Date(vacation[2])
const endDate = new Date(vacation[3])
const duration = `${startDate.toLocaleDateString()} - ${endDate.toLocaleDateString()} + ${vacation[0].toString()}`
const tooltip = `
<div style='padding: 10px'>
<b>Пользователь:</b> ${name}<br><hr>
<div style='margin-top: 10px'><b>Dates of vacations:</b> ${startDate.toLocaleDateString()} - ${endDate.toLocaleDateString()}</div>
</div>
`
let color: string
if (vacation[7] === 'decisionRejected') {
color = 'red'
} else if (vacation[7] === 'noDecision') {
color = 'blue'
} else if (vacation[7] === 'decisionApproved') {
color = 'green'
} else {
color = 'black'
}
const object = [name, duration, tooltip, color, startDate, endDate]
arr.push(object)
})
const merged = [arrayObjects, ...arr]
setDataArray(merged)
}, [rows])
const requestOfStatus = async (statusType: string, activeProjectIds: string) => {
const requests = []
const output: any[][] = []
if (statusType === 'all') {
requests.push(await axios.get(`${SERVER_URI}/rest/workspace/pm/vacations?stringProjectIds=${activeProjectIds}&approveType=noDecision`, {
headers: {
Authorization: `${localStorage.getItem('JWT_Token')}`,
},
}))
requests.push(await axios.get(`${SERVER_URI}/rest/workspace/pm/vacations?stringProjectIds=${activeProjectIds}&approveType=decisionApproved`, {
headers: {
Authorization: `${localStorage.getItem('JWT_Token')}`,
},
}))
requests.push(await axios.get(`${SERVER_URI}/rest/workspace/pm/vacations?stringProjectIds=${activeProjectIds}&approveType=decisionRejected`, {
headers: {
Authorization: `${localStorage.getItem('JWT_Token')}`,
},
}))
} else {
requests.push(await axios.get(`${SERVER_URI}/rest/workspace/pm/vacations?stringProjectIds=${activeProjectIds}&approveType=${statusType}`, {
headers: {
Authorization: `${localStorage.getItem('JWT_Token')}`,
},
}))
}
axios.all(requests).then(axios.spread((...res) => {
const rows: any[][] = []
for (let i = 0; i < res.length; i++) {
const merged = [...res[i].data]
const urls = res[i].config.url
merged.forEach((vacation: any) => {
const startDate = new Date(vacation.vacationStartDate)
startDate.setDate(startDate.getDate() - 1)
rows.push([
vacation.vacationId, // index
vacation.user.userDetails.fullName, // user fullname
startDate, // start date
new Date(vacation.vacationEndDate), // end date
++vacation.duration, // duration
100, // progress
null, // dependencies
urls?.split('approveType=')[1].trim()
])
})
}
const flags: never[] = [], l = rows?.length
let i
// eslint-disable-next-line #typescript-eslint/no-explicit-any, #typescript-eslint/ban-ts-comment
// #ts-ignore
for (i = 0; i < l; i++) {
// eslint-disable-next-line #typescript-eslint/no-explicit-any, #typescript-eslint/ban-ts-comment
// #ts-ignore
if (flags[rows[i][3]]) continue;
// eslint-disable-next-line #typescript-eslint/no-explicit-any, #typescript-eslint/ban-ts-comment
// #ts-ignore
flags[rows[i][3]] = true;
// eslint-disable-next-line #typescript-eslint/no-explicit-any, #typescript-eslint/ban-ts-comment
// #ts-ignore
output.push(rows[i]);
}
setrows(output)
}))
}
const openModal = () => {
setIsOpen(()=>{
return true
})
}
return (
<>
<Header />
<div className='flex flex-col justify-center w-10/12 p-6 m-auto'>
<div className='flex flex-row items-center'>
<div className='flex flex-row'>
{!isLoadingProjects &&
projects &&
(projects as [])?.map((project: IProject) => (
<button
key={project.projectId}
onClick={() => {
projectsButton(project)
}}
className={`px-4 py-2 pt-0 mt-5 mr-5 font-bold text-white rounded hover:bg-gray-700 ${!project.isActive
? 'bg-white border-2 text-gray-500 border-gray-500/50'
: 'text-white bg-gray-500'
}`}
>
{project.projectName}
</button>
))}
</div>
<ApproveTypeMenu onSelected={(item: { id: number, name: string, statusType: string }) => { setSelected(item) }} selected={selected} />
<button className='px-4 py-2 pt-0 mt-5 mr-5 font-bold text-white rounded hover:bg-gray-700 bg-white border-2 text-gray-500 border-gray-500/50'>Применить фильтры</button>
</div>
<Chart
chartType="Timeline"
data={dataArray}
width='100%'
height="600px"
options={options}
chartLanguage='ru'
chartEvents={[
{
eventName: 'ready',
callback: (params) => {
const { chartWrapper, google } = params
const chart: any = chartWrapper.getChart()
google.visualization.events.addListener(chart, 'select', () => {
const [fullname, duration, , , startDate, endDate] = dataArray[chart.getSelection()[0].row + 1]
const vacationId = duration.split('+')[1].trim()
setselectedVacation({ fullname: `${fullname}`, duration: `${duration}`, startDate: startDate, endDate: endDate, vacationId: `${vacationId}` })
openModal()
})
},
},
]}
controls={[
{
controlType: 'CategoryFilter',
options: {
filterColumnIndex: 0,
ui: {
allowTyping: true,
allowMultiple: true,
orientation: 'horizontal',
caption: 'Choose colleague',
showRangeValues: false,
label: 'Filter by colleagues',
labelSeparator: ' ',
},
filterColumnLabel: 'Column Label'
},
controlPosition: 'top',
}
]}
/>
</div>
{selectedVacation.vacationId?.length > 0 && (
<PMModal
vacation={selectedVacation}
isModalOpen={modalIsOpen}
setIsModalOpen={setIsOpen}
refetch={refetch}
/>
)}
</>
);
}
My chartEvents code example without 'ready' event
chartEvents={[
{
eventName: 'select',
callback: (params) => {
const { chartWrapper, google } = params
const chart: any = chartWrapper.getChart()
const [fullname, duration, , , startDate, endDate] = dataArray[chart.getSelection()[0].row + 1]
const vacationId = duration.split('+')[1].trim()
setselectedVacation({ fullname: `${fullname}`, duration: `${duration}`, startDate: startDate, endDate: endDate, vacationId: `${vacationId}` })
openModal()
},
},
]}

How loop images to excel js

i tried loop images from array data into excel using excel js, but the images doesn't show at all.
this this my looping code:
async testAja() {
const workbook = new excelJS.Workbook();
const worksheet = workbook.addWorksheet("My Sheet");
worksheet.columns = [
{ header: 'Date', key: 'date', width: 15, style: { numFmt: 'dd/mm/yyyy' } },
{ header: 'Title', key: 'title', width: 100 },
{ header: 'Confirmation', key: 'confirmation', width: 15 },
{ header: 'Location', key: 'location', width: 15 },
{ header: 'Remark', key: 'remark', width: 15 },
{ header: 'Photo', key: 'photo', width: 20 },
];
let num = 1;
this.state.dataInspection.forEach(async (val, idx) => {
if (val.label_id === null && val.label_id === '') {
const imageBuffer = await axios.get(`https://toqrikyppyhsmwwiabyc.supabase.co/storage/v1/object/public/inspection/photos/${val.photo}`, { responseType: 'arraybuffer' });
const imageId = workbook.addImage({
buffer: imageBuffer.data,
});
worksheet.addImage(imageId, `A${num + 1}:A${num + 5}`);
num += 1;
}
});
workbook.xlsx.writeBuffer().then(function (buffer) {
const blob = new Blob([buffer], { type: "applicationi/xlsx" });
saveAs(blob, "inspection.xlsx");
});
}
and here is my array data
enter image description here

Extract Font Name from PDF

I am using pdf.js to extract text from the pdf but the font name appears as g_d0_f6 etc. I need the font name to use the appropriate table for converting to Unicode. Here is the code derived from pdf2svg.js sample:-
var fs = require('fs');
var util = require('util');
var path = require('path');
var stream = require('stream');
// HACK few hacks to let PDF.js be loaded not as a module in global space.
require('./domstubs.js').setStubs(global);
var pdfjsLib = require('pdfjs-dist');
var pdfPath = process.argv[2] || '../../web/compressed.tracemonkey-pldi-09.pdf';
var data = new Uint8Array(fs.readFileSync(pdfPath));
var loadingTask = pdfjsLib.getDocument({
data: data,
nativeImageDecoderSupport: pdfjsLib.NativeImageDecoding.DISPLAY,
});
loadingTask.promise.then(function(doc) {
var lastPromise = Promise.resolve(); // will be used to chain promises
var loadPage = function (pageNum) {
return doc.getPage(pageNum).then(function (page) {
return page.getTextContent().then(function (textContent) {
console.log(textContent);
});
});
};
for (var i = 1; i <= doc.numPages; i++) {
lastPromise = lastPromise.then(loadPage.bind(null, i));
}
return lastPromise;
}).then(function () {
console.log('# End of Document');
}, function (err) {
console.error('Error: ' + err);
});
Sample output:-
{ items:
[ { str: 'bl fp=k osQ ckjs esa cPpksa ls ckrphr djsa & ;g LowQy esa fdl le; dk n`\'; gS\\ cPps',
dir: 'ltr',
width: 396.2250000000001,
height: 15,
transform: [Array],
fontName: 'g_d0_f1' },
{ str: 'D;k dj jgs gSa\\ cPps dkSu&dkSu ls [ksy] [ksy j',
dir: 'ltr',
width: 216.1650000000001,
height: 15,
transform: [Array],
fontName: 'g_d0_f1' },
{ str: 'g',
dir: 'ltr',
width: 6.42,
height: 15,
transform: [Array],
fontName: 'g_d0_f1' },
{ str: 's gSa\\ fp=k esa fdrus cPps gSa vkSj fdrus',
dir: 'ltr',
width: 173.865,
height: 15,
transform: [Array],
fontName: 'g_d0_f1' },
{ str: 'cM+s gSa\\ vkil esa dkSu D;k ckr dj jgk gksxk\\ cPpksa ls fp=k esa lcosQ fy, uke lkspus',
dir: 'ltr',
width: 396.54000000000013,
height: 15,
transform: [Array],
fontName: 'g_d0_f1' },
{ str: 'dks dgasaA',
dir: 'ltr',
width: 40.74,
height: 15,
transform: [Array],
fontName: 'g_d0_f1' },
{ str: 'csVh cpkvks',
dir: 'ltr',
width: 66.725,
height: 17,
transform: [Array],
fontName: 'g_d0_f2' },
{ str: 'csVh i<+kvksA',
dir: 'ltr',
width: 66.75899999999999,
height: 17,
transform: [Array],
fontName: 'g_d0_f2' },
{ str: '2018-19',
dir: 'ltr',
width: 36.690000000000005,
height: 10,
transform: [Array],
fontName: 'g_d0_f3' } ],
styles:
{ g_d0_f1:
{ fontFamily: 'sans-serif',
ascent: 0.837,
descent: -0.216,
vertical: false },
g_d0_f2:
{ fontFamily: 'sans-serif',
ascent: 0.786,
descent: -0.181,
vertical: false },
g_d0_f3:
{ fontFamily: 'sans-serif',
ascent: 0.9052734375,
descent: -0.2119140625,
vertical: false } } }
And here is the pdf that uses embedded fonts: http://ncert.nic.in/textbook/pdf/ahhn101.pdf
Here is a related question but the suggested commonObjs is empty: pdf.js get info about embedded fonts

Note: The answer below does not have anything to do with pdf.js, however it answers the question, Extract Font Name from PDF.
I did not find a solution yet, so I went ahead and grabbed mutool, which has has the following command to get the font information per page.
mutool info -F input.pdf 0-2147483647
Then I grabbed the spawn function, hacked the output through some regex and pattern matching to return the data.
const extractFontData = async str => {
const getMatches = str => {
const regex = /Page (\d+):\nFonts \((\d+)\):/;
const match = str.match(regex);
if (match) {
return { page: match[1], fonts: match[2] };
}
return {};
};
const singleFont = fontData => {
const match = fontData.match(/\+([a-zA-Z0-9_-]+[.,]?[a-zA-Z0-9_-]+)/);
return match && match[1];
};
return str
.split("Page ")
.map(singlePageData => {
const { page, fonts } = getMatches(`Page ` + singlePageData);
if (fonts) {
const split = singlePageData.split("\n").filter(e => e.length);
const fontList = split.slice(2).map(singleFont);
return { page, fonts, fontList };
}
})
.filter(e => e);
};
// Taken and adjusted from: https://stackoverflow.com/a/52611536/6161265
function run(...cmd) {
return new Promise((resolve, reject) => {
var { spawn } = require("child_process");
var command = spawn(...cmd);
var result = "";
command.stdout.on("data", function(data) {
result += data.toString();
});
command.on("close", function(code) {
resolve(result);
});
command.on("error", function(err) {
reject(err);
});
});
}
async function wrapper(filePath) {
const data = await run("mutool", ["info", "-F", filePath, "0-2147483647"]);
return extractFontData(data);
}
Sample usage:
wrapper("ahhn101.pdf").then(data => console.log(data));
Result:

I think you were on the right track: page.commonObjs is where the actual font name is found. However, page.commonObjs only gets populated when the page's text/operators are accessed, so you'll find it empty if you look before that happens.

javascript code not picking up code_description value for first record

I have something similar to the JSFiddle mentioned here. The JSFiddle works fine, however, I am seeing a strange behaviour in my code. The description of very first
cell is always empty even though I am seeing that in the returned data (in JSON format) from the webservice, the description is present for each record. Please
take a look at the code below and let me know if I am missing anything:
this.processEmployees = function (data_, textStatus_, jqXHR_) {
var collection = data_.employees;
// A helper function used for employee codes below.
var isUsedKey = function (arrayOfObject, key) {
for (var i = 0; i < arrayOfObject.length; i += 1) {
if (arrayOfObject[i].key == key) {
return true;
}
}
return false;
};
var employeeCodes = [];
for (var i = 0; i < collection.length; i++) {
if (i == 0) {
var newItem = {};
newItem.key = collection[i].code_value;
newItem.dates = [collection[i].code_assignment_date];
newItem.description = collection[i].code_description;
newItem.hiringCriterion = collection[i].hiring_criteria;
newItem.name = collection[i].name;
console.log("Would like to check code_description for first item:",collection[i].code_description);
//debugger;
employeeCodes.push(newItem);
} else {
var item = collection[i];
var itemName = item.code_value;
var itemDate = item.code_assignment_date;
var itemDescription = item.code_description;
var hiringCriterion = item.hiring_criteria;
var itemCodeName = item.name;
if (isUsedKey(employeeCodes, itemName)) {
for (var j = 0; j < employeeCodes.length; j++) {
if (employeeCodes[j].key == itemName) {
var index = employeeCodes[j].dates.length;
employeeCodes[j].dates[index] = itemDate;
}
}
} else {
var nextNewItem = {};
nextNewItem.key = itemName;
nextNewItem.dates = [itemDate];
nextNewItem.code_description = itemDescription;
nextNewItem.hiring_criteria = hiringCriterion;
nextNewItem.name = itemCodeName;
employeeCodes.push(nextNewItem);
}
}
}
var newSource = {
localdata: employeeCodes,
datafields: [{
name: 'code_value',
type: 'string',
map: 'key'
},
{
name: 'code_assignment_date',
type: 'date',
map: 'dates>0'
},
{
name: 'name',
type: 'string'
},
{
name: 'code_description',
type: 'string'
},
{
name: 'hiring_criteria',
type: 'string'
}
],
datatype: "array"
};
var newAdapter = new $_.jqx.dataAdapter(newSource);
var iconrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
var icon = '';
if (employeeCodes[row].dates.length > 1) {
icon = '<img src="images/icon-down.png" style="position: absolute; right: 5px;" />';
}
return '<span style="position: relative; width: 100%; margin: 4px; float: ' + columnproperties.cellsalign + ';">' + newAdapter.formatDate(value, 'd') + icon + '</span>';
};
$_(self.gridSelector).jqxGrid({
source: newAdapter,
editable: true,
width: '600',
pageable: true,
sortable: true,
autoheight: true,
theme: 'classic',
height: '170',
columnsResize: true,
columns: [
{
text: 'Employee Name',
datafield: 'name',
width: 85,
},
{
text: 'Code Value',
datafield: 'code_value',
width: 75,
editable: false
},
{
text: 'Latest Date(s)',
datafield: 'code_assignment_date',
cellsformat: 'd',
columntype: 'combobox',
width: 100
createeditor: function (row, column, editor) {
var info = $_(self.gridSelector).jqxGrid('getrowdata', row);
console.log("length of info: " + info);
var groupName = info.code_value;
console.log("Contents of groupName: " + groupName);
var dates = [];
for (var i = 0; i < employeeCodes.length; i++) {
if (employeeCodes[i].key == groupName) {
dates = employeeCodes[i].dates;
}
}
editor.jqxComboBox({ autoDropDownHeight: false, source: dates, promptText: "Previous Date(s):", scrollBarSize: 10 });
},
initeditor: function (row, column, editor) {
var info = $_(self.gridSelector).jqxGrid('getrowdata', row);
var groupName = info.code_value;
var dates = [];
for (var i = 0; i < employeeCodes.length; i++) {
if (employeeCodes[i].key == groupName) {
dates = employeeCodes[i].dates;
}
}
editor.jqxComboBox({
autoDropDownHeight: false,
source: dates,
promptText: "Dates:",
width: 100,
scrollBarSize: 10,
renderer: function (index_, label_, value_) {
return formatDateString(value_);
},
renderSelectedItem: function (index, item) {
var records = editor.jqxComboBox('getItems');
var currentRecord = records[index].label;
return formatDateString(currentRecord);;
}
});
},
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == "") return oldvalue;
}
},
{
text: 'Description',
datafield: 'code_description'
},
{
text: 'Hiring Criterion',
datafield: 'hiring_criteria',
editable: false,
hidden: true
}
],
});
}; // End of processEmployees
For Example, if my JSON is the following:
{
"employees": [{
"code_value": "B1",
"code_assignment_date": "2016-12-13 23:04:00.0",
"code_type": 7,
"code_description": "This employee has received his salary",
"name": "Peter",
"hiring_criteria": null
}, {
"code_value": "A1",
"code_assignment_date": "2016-05-20 05:00:00.0",
"code_type": 7,
"code_description": "Employee has 5 vacation days left",
"name": "Jack",
"hiring_criteria": null
}],
"webServiceStatus": {
"status": "SUCCESS",
"message": "2 results"
}
}
I am not seeing the very first code_description value which is This employee has received his salary in the above JSON response whereas the following
line mentioned in the above code clearly shows it in the console panel:
console.log("Would like to check code_description for first item:",collection[i].code_description);

newItem.description = collection[i].code_description;
---Replace newItem.description to newItem.code_description in First object condition
newItem.hiringCriterion = collection[i].hiring_criteria;
---Replace newItem.hiringCriterion to newItem.hiring_criteria in First object condition

How can I avoid this behavior in react-native?

I'm currently working on an input with mask in react-native, however I'd like to avoid input of non-numeric characters. I did, however I'd like to avoid the behavior below:
enter image description here
'use strict';
import React, { Component, PropTypes } from 'react';
import { styles, cleanStyle, dirtyStyle } from './styles';
import { colors } from '../../config/styles';
import {
Animated,
Easing,
Platform,
StyleSheet,
Text,
TextInput,
View,
Keyboard,
} from 'react-native';
const textPropTypes = Text.propTypes || View.propTypes;
const textInputPropTypes = TextInput.propTypes || textPropTypes;
const propTypes = {
...textInputPropTypes,
inputStyle: textInputPropTypes.style,
labelStyle: textPropTypes.style,
disabled: PropTypes.bool,
style: View.propTypes.style,
};
const SMInput = React.createClass({
propTypes,
getDefaultProps() {
return {
editable: true,
onlyNumbers: false,
underlineColorAndroid: 'transparent'
};
},
getInitialState() {
Keyboard.addListener('keyboardDidChangeFrame', () => {
console.log('keyboardDidChangeFrame');
});
const state = {
text: (this.props.value) ? this.props.value.toString() : '',
dirty: !!this.props.value,
borderColor: new Animated.Value(0),
labelColor: new Animated.Value(0),
maxLength: this.props.maxLength,
placeHolder: '',
};
const style = state.dirty ? dirtyStyle : cleanStyle;
state.labelStyle = {
fontSize: new Animated.Value(style.fontSize),
top: new Animated.Value(style.top),
position: new Animated.Value(style.position),
}
return state;
},
_animate(dirty) {
const animateTime = 150;
const nextStyle = dirty ? dirtyStyle : cleanStyle;
const labelStyle = this.state.labelStyle;
const anims = Object.keys(nextStyle).map(prop => {
return Animated.timing(
labelStyle[prop],
{
toValue: nextStyle[prop],
duration: animateTime,
},
Easing.ease
)
});
setTimeout(() => {
if (this.props.placeholder && dirty) {
this.setState({
placeHolder: this.props.placeholder
});
}
}, 120);
anims.push(
Animated.timing (
this.state.borderColor, {
toValue: dirty ? 1 : 0,
duration: animateTime,
}
)
);
anims.push(
Animated.timing (
this.state.labelColor, {
toValue: dirty ? 1 : 0,
duration: animateTime,
}
)
);
Animated.parallel(anims).start();
},
_onFocus() {
this._animate(true);
this.setState({ dirty: true });
if (this.props.onFocus) {
this.props.onFocus(arguments);
}
},
_onBlur() {
if (!this.state.text) {
this._animate(false);
this.setState({ dirty: false });
}
if (this.props.onBlur) {
this.props.onBlur(arguments);
}
if (this.props.placeholder) {
this.setState({
placeHolder: ''
});
}
},
onChangeText(text) {
this.setMask(text);
if (this.props.onChangeText) {
this.props.onChangeText(text);
}
},
setMask(text) {
//function mask(inputName, mask) {
var mask = '00/00/0000';
this.setState({
maxLength: mask.length
});
var value = text;
var literalPattern = /[0\*]/;
var numberPattern = /[0-9]/;
var newValue = '';
for (var vId = 0, mId = 0 ; mId < mask.length ; ) {
if (mId >= value.length) {
break;
}
// Number expected but got a different value, store only the valid portion
if (mask[mId] == '0' && value[vId].match(numberPattern) == null) {
break;
}
// Found a literal
while (mask[mId].match(literalPattern) == null) {
if (value[vId] == mask[mId]) {
break;
}
newValue += mask[mId++];
}
newValue += value[vId++];
mId++;
}
this.setState({
text: newValue
})
},
updateText(event) {
const text = event.nativeEvent.text;
this.setState({ text })
if (this.props.onEndEditing) {
this.props.onEndEditing(event);
}
},
_renderLabel() {
const labelColor = this.state.labelColor.interpolate({
inputRange: [ 0, 1 ],
outputRange: [ colors.darkPurple50, colors.purple100 ]
});
return (
<View style={ styles.wrapper }>
<Animated.Text
ref='label'
style={ [this.state.labelStyle, styles.label, this.props.labelStyle, { color: labelColor } ] }
>
{this.props.children}
</Animated.Text>
</View>
)
},
render() {
const borderColor = this.state.borderColor.interpolate({
inputRange: [ 0, 1 ],
outputRange: [ colors.gray80, colors.purple100 ]
});
const props = {
autoCapitalize: this.props.autoCapitalize,
autoCorrect: this.props.autoCorrect,
autoFocus: this.props.autoFocus,
bufferDelay: this.props.bufferDelay,
clearButtonMode: this.props.clearButtonMode,
clearTextOnFocus: this.props.clearTextOnFocus,
controlled: this.props.controlled,
editable: this.props.editable,
enablesReturnKeyAutomatically: this.props.enablesReturnKeyAutomatically,
keyboardType: this.props.keyboardType,
multiline: this.props.multiline,
onBlur: this._onBlur,
onChange: this.props.onChange,
onChangeText: this.onChangeText,
onEndEditing: this.updateText,
onFocus: this._onFocus,
onSubmitEditing: this.props.onSubmitEditing,
password: this.props.password,
returnKeyType: this.props.returnKeyType,
selectTextOnFocus: this.props.selectTextOnFocus,
selectionState: this.props.selectionState,
style: [styles.input],
maxLength: this.state.maxLength,
underlineColorAndroid: this.props.underlineColorAndroid, // android TextInput will show the default bottom border
onKeyPress: this.props.onKeyPress,
spellCheck: this.props.spellCheck,
mask: this.props.mask,
placeholder: this.state.placeHolder,
placeholderTextColor: colors.darkPurple50,
value: this.state.text,
};
const elementStyles = [styles.element];
if (this.props.inputStyle) {
props.style.push(this.props.inputStyle);
}
if (this.props.style) {
elementStyles.push(this.props.style);
}
if (!this.props.editable) {
elementStyles.push(styles.elementNotEditable);
props.style.push(styles.inputNotEditable);
}
return (
<Animated.View style={ [elementStyles, { borderColor: borderColor }] }>
{ this._renderLabel() }
<TextInput
{ ...props }
>
</TextInput>
</Animated.View>
);
},
});
SMInput.propTypes = {
disabled: PropTypes.bool,
style: Text.propTypes.style,
};
export default SMInput;